<template>
  <div class="show">
    <NavbarIndex />
    <div class="container">
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
          <li class="breadcrumb-item">
            <router-link to="/">首页</router-link>
          </li>
          <li
            v-for="(item, index) in crumb"
            :key="index"
            class="breadcrumb-item"
          >
            <router-link :to="'/list/' + item.id +'/' + item.pid">{{item.title}}</router-link>
          </li>
        </ol>
      </nav>
      <div class="row">
        <div class="col-lg-8">
          <article v-show="is_title">
            <h3
              class="title mt-3 mb-2"
              :class="news.title.length < 10?'text-center':'' "
            >{{news.title}}</h3>
            <div v-if="news.content_news_data.sub_title.length > 0">—— {{news.content_news_data.sub_title}}</div>
            <hr>
            <div
              class="social-share"
              data-disabled="google,twitter,facebook,tencent,linkedin,diandian"
            ></div>
            <p class="text-center">{{news.create_time*1000 | formatDate}}<span
                class="ml-2"
                v-if="news.author.length > 0"
              >作者：{{news.author}}</span><span
                class="ml-2"
                v-if="news.content_news_data.copyfrom.length > 0"
              >来源：{{news.content_news_data.copyfrom}}</span></p>
            <p
              class="content"
              v-html="news.content_news_data.content"
            ></p>
          </article>
          <ul
            class="list-inline"
            v-if="news.keywords.length"
          >
            <li class="list-inline-item"><strong>关键词：</strong></li>
            <li
              class="list-inline-item"
              v-for="item in news.keywords"
              :key="item.id"
            >
              <router-link :to="'/keywords/' + item">
                {{item}}
              </router-link>
            </li>
          </ul>
          <ul
            class="list-unstyled"
            v-if="extendList.length"
          >
            <li><strong>延伸阅读：</strong></li>
            <li
              class="pl-4 content text-truncate"
              v-for="item in extendList"
              :key="item.id"
            >
              <router-link :to="'/show/' + item.id">
                {{item.title}}
              </router-link>
            </li>
          </ul>
          <ul class="list-unstyled">
            <li><strong>信德网版权与免责声明：</strong></li>
            <li class="pl-4 mt-2">1、投稿：本网欢迎网络和传真等各类方式投稿，但请勿一稿多投。</li>
            <li class="pl-4">2、版权：凡本网注明"来源：信德报、信德网或信德编辑部译"的所有内容，版权均属于信德社所有。欢迎转载，但请注明出处。</li>
            <li class="pl-4">3、文责：欢迎各地教区、堂区、团体或个人提供当地新闻及其他稿件，信德网一旦刊登，版权虽属信德社，但并不代表本社或本网观点，文责一律由投稿者（教区、堂区、团体、个人）自负。</li>
            <li class="pl-4">4、转载：凡本网注明"来源：XXX（非信德报或信德网）"的内容，为本网网友推荐而转载自其他媒体。转载内容并不代表本网观点，转载的目的只在于传递分享更多信息。</li>
          </ul>
        </div>
        <div class="col-lg-4">
          <ExtranetAdvert />
        </div>
      </div>
    </div>
    <FooterIndex />
  </div>
</template>

<script>
// @ is an alias to /src
import FooterIndex from "@/components/FooterIndex.vue";
import NavbarIndex from "@/components/NavbarIndex.vue";
import ExtranetAdvert from "@/components/ExtranetAdvert.vue";
import { formatDate } from "../util/date.js";
import "social-share.js/dist/js/social-share.min.js";
import { mapState } from "vuex";
export default {
  name: "home",
  components: {
    NavbarIndex,
    FooterIndex,
    ExtranetAdvert
  },
  data () {
    return {
      news: {
        title: "",
        content_news_data: { content: "", copyfrom: "", sub_title: "" },
        keywords: [],
        author: ""
      },
      domain: process.env.VUE_APP_baseURL,
      extendList: [],
      titlewidth: "100%",
      is_title: 0,
      config: {
        title: "",
        url: "",
        description: "",
        source: "",
        image: ""
      },
      share: false,
      crumb: []
    };
  },
  computed: {
    ...mapState({
      catList: state => state.cat.catList
    })
  },
  created () {
    this.fetchData();
    window.scrollTo(0, 0);
    this.views();
    // console.log('titleeeee',typeof news.content_news_data.sub_title)
  },
  watch: {
    $route () {
      this.fetchData();
      window.scrollTo(0, 0);
      this.views();
    },
    news: function (val) {
      let _this = this;
      let title = process.env.VUE_APP_meta_title + val.title;
      document.title = title;
      this.share = true;
      this.config.url = "https://www.xinde.org/show/" + val.id;
      this.config.title = val.title;
      this.config.description = val.description.substring(0, 59);
      this.config.image = this.domain + val.thumb;
      window.socialShare(
        this.$el.getElementsByClassName("social-share")[0],
        this.config
      );

      this.is_title = 1;
      this.axios
        .post("/content/news/extendList", {
          id: val.id,
          keywords: val.keywords
        })
        .then(function (ret) {
          _this.extendList = ret.data;
        });
    }
  },
  methods: {
    //获取详情页内容
    fetchData () {
      let that = this;
      let url = process.env.VUE_APP_newsShow_url;
      that.axios
        .post(url, {
          id: that.$route.params.id
        })
        .then(function (ret) {
          if (ret.data.keywords) {
            ret.data.keywords = ret.data.keywords.split(",")
          } else {
            ret.data.keywords = []
          }
          that.setCrumb(ret.data)
          that.news = ret.data;
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    setCrumb (data) {
      // console.log(this.catList)
      for (let i = 0; i < this.catList.length; i++) {
        let x = 0
        for (let j = 0; j < this.catList[i]._child.length; j++) {
          if (this.catList[i]._child[j].id == data.cat_id) {
            x = 1
            this.crumb.push({ id: this.catList[i]._child[j].id, pid: this.catList[i]._child[j].pid, title: this.catList[i]._child[j].title })
            break
          }
        }
        if (x == 1) {
          this.crumb.unshift({ id: this.catList[i].id, pid: this.catList[i].pid, title: this.catList[i].title })
          console.log(this.crumb)
          break
        }
      }
    },
    //点击量
    views () {
      let id = this.$route.params.id;
      let url = process.env.VUE_APP_newsView_url;
      this.axios.post(url, { id: id }).then();
    }
  },
  filters: {
    formatDate (time) {
      var date = new Date(time);
      return formatDate(date, "yyyy-MM-dd hh:mm:ss"); //显示到日 'yyyy-MM-dd hh:mm' //全部显示
    },
    formatTime (time) {
      var date = new Date(time);
      return formatDate(date, "hh:mm"); //显示到小时
    },

  },
  mounted () {
    // console.log(this.$el.getElementsByClassName("social-share")[0])
    //console.log(this.config)
    //window.socialShare(this.$el.getElementsByClassName("social-share")[0], this.config)
  }
};
</script>
<style src="social-share.js/dist/css/share.min.css"></style>
<style>
.title {
  margin: auto;
}
.content img {
  max-width: 100%;
}
.content {
  font-size: 1.2rem;
  line-height: 2;
  font-weight: 400;
}
.breadcrumb {
  background: #ffffff;
  margin-bottom: 0;
}
</style>
